<template>
  <div class="login">
    <div class="login-con">
        <div class="form-con">

          <p class="login-tip">若忘记密码，请联系系统管理员</p>
        </div>

        <input v-model="phone" placeholder="请输入用户名">
        <p></p>
        <input type="password" v-model="pwd" placeholder="请输入密码">
        <p></p>

        <div v-if="codeFlag==true">
          <Button type="primary" ghost class="ml5 mt5" size="small" @click="getVerificationCode()">获取验证码</Button>
        </div>
        <div v-else>
          <Tag color="default" class="ml5 mt5">
            <!--                  <CountDown :target="targetTime" @on-end="handleEnd"/>-->
            <span>{{targetTime}}</span>秒
          </Tag>
        </div>
      <input v-model="code" placeholder="请输入验证码">
      <p></p>
      <Button @click="handleSubmit" type="primary" long html-type="submit">登录</Button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "loginCode",
    data() {
      return {
        codeFlag: true, // 获取验证码按钮是否可用
        targetTime: 60,//短信间隔时间
        phone: '',
        pwd: '',
        code: ''
      };
    },
    mounted() {
    },
    methods: {
      handleSubmit () {
        console.info('password:' + this.pwd + ' phone:' + this.phone+ ' code:' + this.code)
      },
      getVerificationCode () {
        console.info('----------getVerificationCode-------------')
        if (!/^1[3456789]\d{9}$/.test(this.phone)) {
          console.info('手机号格式不正确，请重试')
          return
        }
        this.codeFlag = false
        // verificationCode({tel: this.checkData.tel, userId: this.checkData.userId, type: 1}).then(res => {
        //   if (res.code == 200) {
        //     this.$Message.success('手机验证码发送成功')
        //     // 计时器
        //     this.clock()
        //   } else {
        //     this.$Message.error('手机验证码发送失败')
        //     this.codeFlag = true
        //   }
        // })
        let rsStr = '{"code": 200,"msg":"ok"}'
        let res = JSON.parse(rsStr)
        if (res.code == 200) {
          console.info('手机验证码发送成功')
          // 计时器
          this.clock()
        } else {
          console.info('手机验证码发送失败')
          this.codeFlag = true
        }
      },
      // 计时器
      clock () {
        let obj = this
        this.targetTime = 60
        let times = setInterval(() => {
          obj.targetTime = obj.targetTime - 1
          if (obj.targetTime <= 0) {
            obj.codeFlag = true
            clearInterval(times)
          }
        }, 1000)
      }
    }
  }
</script>

<style scoped>

</style>